<template>
  <div
    class="app-wrapper app-wrapper-process"
    id="app-wrapper"
    :class="{ Mobile: isMobile }"
  >
    <div class="main-container">
      <div class="sidebar-wrapper">
        <sidebar
          class="sidebar-container"
          :isMobile="isMobile"
          :detail="false"
          :lightHeight="2"
        ></sidebar>
      </div>
      <div
        class="main-layout"
        id="main-layout"
        :style="{
          left: isMobile ? '0' : '50px',
          padding: isMobile ? '1px' : '20px 40px 20px 20px',
          top: isMobile ? '50px' : '0',
          bottom: isMobile ? '0px' : '40px',
          'overflow-y': isMobile ? '' : 'hidden',
        }"
      >
        <div class="box-main">
          <header class="header clearfix">
            <div class="title">&nbsp;&nbsp;施工进度</div>
          </header>
          <div id="tableee">
            <div
              class="left"
              id="left"
              :style="{
                'min-width': isMobile ? '180px' : '240px',
                'max-width': isMobile ? '180px' : '240px',
              }"
            >
              <div class="header">
                <div class="plan">计划完成： {{ benchmarkCompletion }}</div>
                <div class="real">预计完成： {{ currentExpectations }}</div>
              </div>
              <div :style="{ height: viewHeight + 'px' }" class="leftview-box">
                <div
                  class="list"
                  ref="leftview"
                  id="leftview"
                  :style="{ width: isMobile ? '180px' : '240px' }"
                >
                  <li
                    v-for="(item, index) in processItem"
                    :key="index"
                    :id="'left-' + index"
                  >
                    <process-item
                      :isMobile="isMobile"
                      :listItemData="item"
                      :index="index"
                    ></process-item>
                  </li>
                </div>
              </div>
            </div>
            <div
              class="right"
              id="right"
              ref="right"
              style="position: relative"
            >
              <div
                class="tags"
                :style="{
                  top: isMobile ? '170px' : '144px',
                  right: isMobile ? '0' : '',
                }"
              >
                <div class="tages-item">
                  <div class="color" style="background: #9ed286"></div>
                  <div class="text">计划完成</div>
                </div>
                <div class="tages-item">
                  <div class="color" style="background: #00b3f6"></div>
                  <div class="text">实际完成</div>
                </div>
              </div>

              <div class="header" style="z-index: 100000" id="boxHeader">
                <div
                  id="year"
                  class="year"
                  :style="{ width: year[0].yearAllWidth + 'px' }"
                  v-if="year.length"
                >
                  <div
                    class="year-item"
                    :style="{ width: item.yearWidth + 'px' }"
                    v-for="(item, index) in year"
                    :id="item.year"
                    :key="index"
                  >
                    {{ item.year }}
                  </div>
                </div>
                <div
                  class="month"
                  :style="{ width: year[0].yearAllWidth + 'px' }"
                  v-if="month.length"
                >
                  <div
                    class="month-item"
                    :style="{ width: item.width + 'px' }"
                    v-for="(item, index) in month"
                    :index="index"
                    :id="item.id"
                    :key="index"
                  >
                    {{ item.month }}
                  </div>
                </div>
                <div
                  class="month"
                  :style="{ width: year[0].yearAllWidth + 'px' }"
                  v-if="month.length"
                >
                  <div
                    class="month-item"
                    :style="{ width: item.width + 'px' }"
                    v-for="(item, index) in month"
                    :index="index"
                    :id="item.id"
                    :key="index"
                  >
                    {{ index + 1 }}
                  </div>
                </div>
              </div>

              <ul
                class="list"
                id="rightview"
                ref="rightview"
                style="overflow-y: scroll"
                v-if="year.length"
                :style="{
                  width: year[0].yearAllWidth + 'px',
                  height: viewHeight + 'px',
                  'margin-left': -tableLeft + 'px !important',
                }"
              >
                <li v-for="(item, i) in processItem" :key="i">
                  <div class="process-item">
                    <div v-for="(z, o) in item.process" class="111" :key="o">
                      <div v-if="o === 0 && z.length" class="process-item-one">
                        <div
                          class="line"
                          v-if="z[0].lineWidth"
                          :style="{
                            top: '50px',
                            left: z[0] ? z[0].lineStart + 2 + 'px' : 0,
                            width: z[0].lineWidth ? z[0].lineWidth + 'px' : 0,
                          }"
                          style="
                            -webkit-box-shadow: 0 0 2px #000;
                            -moz-box-shadow: 0 0 2px #000;
                            box-shadow: 0 0 2px #000;
                            height: 6px;
                          "
                        ></div>
                        <div v-for="(item, index) in z" :key="index">
                          <Popover placement="top" trigger="hover">
                            <table class="table">
                              <thead>
                                <th>序号</th>
                                <th>里程碑名称</th>
                                <th>时间</th>
                              </thead>
                              <tbody>
                                <tr
                                  v-for="(itemTr, i) in ranferA(z, item)"
                                  :key="i + 'll'"
                                >
                                  <td>{{ i + 1 }}</td>
                                  <td>{{ itemTr.value }}</td>
                                  <td>{{ itemTr.actualTipDate }}</td>
                                </tr>
                              </tbody>
                            </table>
                            <div
                              slot="reference"
                              v-show="item.isShowLabel"
                              style="
                                position: absolute;
                                width: 14px;
                                height: 14px;
                                top: 47px;
                                border-radius: 50%;
                                border: 4px solid #00b3f6;
                                cursor: pointer;
                                -webkit-box-shadow: 0 0 2px #000;
                                -moz-box-shadow: 0 0 2px #000;
                                box-shadow: 0 0 2px #000;
                                background: #fff;
                              "
                              :style="{
                                display: item.isShowLabel ? 'block' : 'none',
                                left: item.pointLeft
                                  ? item.pointLeft + 'px'
                                  : 0,
                              }"
                            ></div>
                          </Popover>
                          <div
                            class="label-item"
                            style="position: absolute; color: #fff"
                            :style="{
                              left: item.pointTextLeft + 'px',
                              top: index % 2 === 0 ? '30px' : '60px',
                            }"
                          >
                            {{ item.value }}
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 计划 -->
                    <div
                      v-for="(z, o) in item.process"
                      class="222"
                      :key="o + 'kk'"
                    >
                      <div v-if="o === 1 && z.length" class="process-item-one">
                        <div
                          class="line"
                          v-if="z[0].lineWidth"
                          :style="{
                            background: '#9ed286',
                            top: '110px',
                            'z-index': 3,
                            left: z[0] ? z[0].lineStart + 2 + 'px' : 0,
                            width: z[0].lineWidth ? z[0].lineWidth + 'px' : 0,
                          }"
                          style="
                            -webkit-box-shadow: 0 0 2px #000;
                            -moz-box-shadow: 0 0 2px #000;
                            box-shadow: 0 0 2px #000;
                            height: 6px;
                          "
                        ></div>
                        <div v-for="(item, index) in z" :key="index">
                          <Popover placement="top" trigger="hover">
                            <table class="table">
                              <thead>
                                <th>序号</th>
                                <th>里程碑名称</th>
                                <th>时间</th>
                              </thead>
                              <tbody>
                                <tr
                                  v-for="(itemTr, i) in ranferP(z, item)"
                                  :key="i + 'lo'"
                                >
                                  <td>{{ i + 1 }}</td>
                                  <td>{{ itemTr.value }}</td>
                                  <td>{{ itemTr.planTipDate }}</td>
                                </tr>
                              </tbody>
                            </table>
                            <div
                              slot="reference"
                              v-show="item.isShowLabel"
                              style="
                                z-index: 3;
                                position: absolute;
                                width: 14px;
                                cursor: pointer;
                                height: 14px;
                                top: 107px;
                                border-radius: 50%;
                                border: 4px solid #9ed286;
                                -webkit-box-shadow: 0 0 2px #000;
                                -moz-box-shadow: 0 0 2px #000;
                                box-shadow: 0 0 2px #000;
                                background: #fff;
                              "
                              :style="{
                                display: item.isShowLabel ? 'block' : 'none',
                                left: item.pointLeft
                                  ? item.pointLeft + 'px'
                                  : 0,
                              }"
                            ></div>
                          </Popover>
                          <div
                            class="label-item"
                            style="position: absolute; color: #fff"
                            :style="{
                              left: item.pointTextLeft + 'px',
                              top: index % 2 === 0 ? '88px' : '126px',
                            }"
                          >
                            {{ item.value }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="scrollbar" id="scrollbar">
                <div style="width: 100%; height: 100%; position: relative">
                  <div
                    class="bar"
                    @mousedown="barMousedown"
                    @mousemove="barMousemove"
                    @mouseup="barMouseup"
                    id="bar"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ProcessItem from "./processItem.vue";
import dayjs from "dayjs";
import { Popover } from "element-ui";
import { isMobile } from "@/utils/index";
import Sidebar from "@/components/Sidebar.vue";
// import Response from "./test.js";
import { constructionProgress } from "../../api/api";

export default {
  name: "Progress",
  components: {
    Sidebar,
    ProcessItem,
    Popover,
  },
  data() {
    return {
      tableLeft: 0,
      startX: 0,
      scrollLeft: 0,
      isMouseDown: false,
      scale: 1,
      isScroll: false,
      selectArea: 0,
      year: [],
      month: [],
      viewHeight: null,
      processItem: [],
      isMobile: false,
      isShow: false,
      right: null,
      leftview: null,
      rightview: null,
      benchmarkCompletion: "",
      currentExpectations: "",
      copyData: "",
    };
  },
  created() {
    this.isMobile = isMobile();
    this.viewHeight = $(window).height() - 260;
  },
  watch: {
    scrollLeft(val) {
      this.tableLeft = val * (1 + this.scale);
    },
  },
  mounted: async function () {
    this.year = [];
    this.month = [];
    await this.getProcessData();
    this.right = this.$refs.right;
    this.leftview = this.$refs.leftview;
    this.rightview = this.$refs.rightview;
    this.rightview.addEventListener("scroll", (e) => {
      $("#leftview").css("top", -this.$refs.rightview.scrollTop + "px");
    });
    var preScrollLeft = 0;
    this.right.addEventListener("scroll", (e) => {
      const leftWidth = $("#left").width() + 20 + 50;
      $("#boxHeader").css(
        "left",
        -this.$refs.right.scrollLeft + leftWidth + "px"
      );
      $("#boxHeader1").css(
        "left",
        -this.$refs.right.scrollLeft + leftWidth + "px"
      );
      e.target.scrollLeft > preScrollLeft
        ? $("#bar").css(
            "left",
            this.$refs.right.scrollLeft + leftWidth - 200 + "px"
          )
        : $("#bar").css(
            "left",
            this.$refs.right.scrollLeft + leftWidth + 200 + "px"
          );
      preScrollLeft = e.target.scrollLeft;
    });
    $(window).resize((v) => {
      this.isMobile = isMobile();
      this.viewHeight = $(window).height() - 260;
      this.initChart(this.copyData);
      this.$forceUpdate();
    });
  },
  methods: {
    barMousedown: function (e) {
      this.isMouseDown = true;
      this.startX = e.offsetX;
    },
    barMousemove: function (e) {
      if (this.isMouseDown) {
        console.log(e);
        let offsetX = e.offsetX - this.startX;
        this.scrollLeft = this.scrollLeft + offsetX;
        $("#bar").css("margin-left", this.scrollLeft + "px");
      }
    },

    barMouseup: function () {
      this.isMouseDown = false;
    },
    initChart: async function (resData) {
      var response = JSON.parse(JSON.stringify(resData));
      this.benchmarkCompletion = response.benchmarkCompletion;
      this.currentExpectations = response.currentExpectations;
      var arr = [];
      var map1 = [];
      var map2 = [];
      var map3 = [];
      if (response.constrct92.length && response.constrct92[0].workProgress) {
        response.constrct92[0].workProgress.forEach((item) => {
          item.id = item.code;
          item.planDate = item.planfinishdate;
          item.actualDate = item.actfinishdate;
          map1.push(item);
        });
      }

      if (response.constrct03.length && response.constrct03[0].workProgress) {
        response.constrct03[0].workProgress.forEach((item) => {
          item.id = item.code;
          item.planDate = item.planfinishdate;
          item.actualDate = item.actfinishdate;
          map2.push(item);
        });
      }

      if (response.constrct04.length && response.constrct04[0].workProgress) {
        response.constrct04[0].workProgress.forEach((item) => {
          item.id = item.code;
          item.planDate = item.planfinishdate;
          item.actualDate = item.actfinishdate;
          map3.push(item);
        });
      }
      const res = [
        {
          projectname: "公共",
          spi:
            response.constrct92.length && response.constrct92[0].publicSPI
              ? response.constrct92[0].publicSPI
              : 0,
          summarySchedulePercentComplete: Number(
            response.constrct92.length &&
              response.constrct92[0].publicPlanPercent
              ? response.constrct92[0].publicPlanPercent
              : 0
          ),
          summaryPerformancePercentCompleteByCost: Number(
            response.constrct92.length &&
              response.constrct92[0].publicActPercent
              ? response.constrct92[0].publicActPercent
              : 0
          ),
          maplist: map1,
        },
        {
          projectname: "#3机组",
          spi:
            response.constrct03.length && response.constrct03[0].spi3
              ? response.constrct03[0].spi3
              : 0,
          summarySchedulePercentComplete: Number(
            response.constrct03.length && response.constrct03[0].planPercent3
              ? response.constrct03[0].planPercent3
              : 0
          ),
          summaryPerformancePercentCompleteByCost: Number(
            response.constrct03.length && response.constrct03[0].actPercent3
              ? response.constrct03[0].actPercent3
              : 0
          ),
          maplist: map2,
        },
        {
          projectname: "#4机组",
          spi:
            response.constrct04.length && response.constrct04[0].spi4
              ? response.constrct04[0].spi4
              : 0,
          summarySchedulePercentComplete: Number(
            response.constrct04.length && response.constrct04[0].planPercent4 ? response.constrct04[0].planPercent4 : 0
          ),
          summaryPerformancePercentCompleteByCost: Number(
            response.constrct04.length && response.constrct04[0].actPercent4 ? response.constrct04[0].actPercent4 : 0
          ),
          maplist: map3,
        },
      ];

      await this.renderHeader(res);
      for (let i = 0; i < res.length; i++) {
        const v = res[i];
        let obj = {
          process: [],
          project: {
            name: v.projectname,
            SPI: Number(v.spi),
            payment: 0,
            summaryPerformancePercentCompleteByCost: (
              v.summaryPerformancePercentCompleteByCost * 100
            ).toFixed(2),
            summaryPlannedValueByCost: v.summaryPlannedValueByCost,
            summaryPlannedValueByLaborUnits: v.summaryPlannedValueByLaborUnits,
            summarySchedulePercentComplete: (
              v.summarySchedulePercentComplete * 100
            ).toFixed(2),
          },
        };
        let process = [];
        if (v.maplist && v.maplist.length) {
          const planDate = v.maplist.filter((item) => {
            if (item.planDate) {
              return item;
            }
          });

          const actualDate = v.maplist.filter((item) => {
            if (item.actualDate) {
              return item;
            }
          });

          actualDate.forEach((v) => {
            v.actualTime = dayjs(v.actualDate).format("YYYY-MM");
            v.value = v.name;
            v.actualTipDate = dayjs(v.actualDate).format("YYYY-MM-DD");
          });

          planDate.forEach((v) => {
            v.planTime = dayjs(v.planDate).format("YYYY-MM");
            v.value = v.name;
            v.planTipDate = dayjs(v.planDate).format("YYYY-MM-DD");
          });

          actualDate.sort(
            (a, b) => new Date(a.actualTime) - new Date(b.actualTime)
          );

          planDate.sort((a, b) => new Date(a.planTime) - new Date(b.planTime));

          var bb = [...actualDate, ...[]];
          var cc = [...planDate, ...[]];
          var b = this.doWidthData(bb, 1);
          var c = this.doWidthData(cc, 2);

          process.push(b);
          process.push(c);
        }
        obj.process = process;
        arr.push(obj);
      }
      this.processItem = [...arr, ...[]];
    },

    /**
     * 获取进度数据信息 整体进展
     * */
    getProcessData: async function () {
      const response = await constructionProgress(this.$route.query.projectId)
      this.copyData = response;
      this.initChart(response);
    },

    ranferA(z, item) {
      var arr = [];
      for (let i = 0; i < z.length; i++) {
        const element = z[i];
        if (
          element.actualDate &&
          element.actualDate.includes(item.actualTime)
        ) {
          arr.push(element);
        }
      }

      arr.sort((a, b) => new Date(a.actualTipDate) - new Date(b.actualTipDate));
      return arr;
    },

    ranferP(z, item) {
      var arr = [];
      for (let i = 0; i < z.length; i++) {
        const element = z[i];
        if (element.planDate && element.planDate.includes(item.planTime)) {
          arr.push(element);
        }
      }

      arr.sort((a, b) => new Date(a.planTipDate) - new Date(b.planTipDate));
      return arr;
    },
    /**
     *生成表格header
     * */
    renderHeader: async function (arr) {
      const yearArr = [];
      for (let i = 0; i < arr.length; i++) {
        const v = arr[i];
        if (v.maplist && v.maplist.length) {
          v.maplist.forEach((vv) => {
            if (vv.planDate) {
              let time = vv.planDate.split("-")[0];
              const flag = yearArr.filter((item) => {
                return item.year === time;
              });
              if (!flag || !flag.length) {
                let obj = {
                  year: time,
                };
                yearArr.push(obj);
              }
            }
          });
        }
      }
      yearArr.sort((a, b) => new Date(a.year) - new Date(b.year));
      const month = [];
      var boxHeaderWidth = $("#boxHeader").width();
      var unitTdWidth = 170;
      for (let i = 0; i < yearArr.length; i++) {
        const item = yearArr[i];
        const everyYear = item.year;
        item.yearAllWidth = yearArr.length * 12 * unitTdWidth;
        // item.yearWidth = yearArr.length * 12 * 10
        for (let j = 1; j <= 12; j++) {
          month.push({
            id: j <= 9 ? everyYear + "-0" + j : everyYear + "-" + j,
            month: "M" + j,
            width: unitTdWidth,
            allWidth: yearArr.length * 12 * unitTdWidth,
          });
        }
      }
      this.year = yearArr;
      this.month = month;
    },

    getPointPosition: function (data, type) {
      const returnArr = [];
      let everyLine = JSON.parse(data);
      for (var j = 0; j < everyLine.length; j++) {
        const obj = everyLine[j];
        obj.isShowLabel = true;
        obj.lineWidth = 0;
        obj.lineStart = 0;
        obj.lineEnd = 0;
        obj.pointLeft = 0;
        obj.pointTextLeft = 0;
        const s =
          type === 0
            ? obj.baselineTime
            : type === 1
            ? obj.actualTime
            : obj.planTime;
        const startDom = document.getElementById(s);
        let p = 0;
        if (startDom) {
          let domIndex = Number($("#" + s).attr("index")) + 1;
          let index =
            (Number($("#" + s).attr("index")) + 1) *
              startDom.getBoundingClientRect().width -
            4;
          p = index - startDom.getBoundingClientRect().width / 2;
          let pointLeft = p;
          let pointTextLeft = pointLeft - (obj.value.length * 12) / 2 + 4;
          obj.pointLeft = pointLeft;
          obj.pointTextLeft = pointTextLeft;
          if (everyLine.length <= 1) {
            obj.lineWidth = 0;
            obj.lineStart = 0;
            obj.lineEnd = 0;
          } else if (everyLine.length > 1) {
            obj.lineStart = pointLeft + 2;
            let end =
              type === 1
                ? everyLine[everyLine.length - 1].actualTime
                : everyLine[everyLine.length - 1].planTime;
            let enndDom = document.getElementById(end);
            let domEndIndex = Number($("#" + end).attr("index")) + 1;
            let endLeft =
              (Number($("#" + end).attr("index")) + 1) *
              enndDom.getBoundingClientRect().width;
            // let start = pointLeft
            // 获取point x 位置
            obj.lineEnd = endLeft;
            obj.lineWidth = (domEndIndex - domIndex) * $("#" + end).width() + 6;
          }
        } else {
          obj.lineWidth = 0;
          obj.lineStart = 0;
          obj.lineEnd = 0;
          obj.pointLeft = 0;
          obj.pointTextLeft = 0;
        }
        returnArr.push(obj);
      }
      return returnArr;
    },

    doWidthData: function (list, type) {
      if (list.length) {
        // 冻结上一次传入数据 防止数据冒泡
        let v = JSON.stringify(list);
        const map = this.getPointPosition(v, type);
        this.$forceUpdate();
        return map;
      } else {
        return [];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box-main {
  padding-top: 20px;
}
.header {
  height: 40px;
  width: 100%;
  .title {
    margin-top: 7px;
    height: 14px;
    line-height: 14px;
    padding-left: 10px;
    border-left: 4px solid #008bf3;
    font-weight: 700;
    font-size: 17px;
    color: #ffffff;
  }
}

.main-body {
  margin-top: 20px !important;
}

#tableee {
  display: flex;
  position: relative;
  .left {
    flex: 1;
    border-top: 1px solid transparent;
    .header {
      height: 70px;
      margin-bottom: 46px;
      .plan {
        margin-top: 10px;
        font-size: 14px;
        color: #93c580;
        font-weight: 700;
      }
      .real {
        margin-top: 6px;
        font-size: 14px;
        color: #00a4e3;
        font-weight: 700;
      }
    }
    .list {
      li {
        height: 150px;
        border-bottom: 2px dashed #ffffff;
      }
    }
  }
  .right {
    overflow-x: auto;
    flex: 1;
    .header {
      margin-bottom: 96px;
      height: 31px;
      width: 100%;
      .year {
        display: flex;

        text-align: center;
        .year-item {
          flex: 1;
          height: 18px;
          line-height: 18px;

          display: inline-block;
          border-right: 1px solid #fff;
          border-bottom: 1px solid #fff;
          border-top: 1px solid #fff;
          color: #ffffff;
        }
        .year-item:first-child {
          border-left: 1px solid #eff0f4;
        }
      }
      .month {
        height: 15px;
        line-height: 15px;
        display: flex;
        border-bottom: 1px solid #ffffff;
        .month-item {
          border-right: 1px solid #ffffff;
          color: #ffffff;
          min-width: 30px;
          text-align: center;
          display: inline-block;
          flex: 1;
        }
        .month-item:first-child {
          border-left: 1px solid #ffffff;
        }
      }
    }
    .list {
      li {
        border-bottom: 2px dashed #fff;
        position: relative;
      }
    }
  }
}

.point {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 4px solid blue;
  -webkit-box-shadow: 0 0 2px #000000;
  -moz-box-shadow: 0 0 2px #000000;
  box-shadow: 0 0 2px #000000;
  display: inline-block;
  cursor: pointer;
  position: absolute;
}

.point-bottom {
  width: 14px;
  height: 14px;
  border-radius: 7px;
  border: 4px solid #82ff81;
  -webkit-box-shadow: 0 0 2px #000000;
  -moz-box-shadow: 0 0 2px #000000;
  box-shadow: 0 0 2px #000000;
  display: inline-block;
  cursor: pointer;
  position: absolute;
}

.point-txt {
  display: inline-block;
  white-space: nowrap;
  position: absolute;
  font-weight: 700;
}

.point-txt-1 {
  color: #848484;
}

.point-txt-2 {
  color: #848484;
}

.line {
  top: 36px;
  background: #00b3f6;
  -webkit-box-shadow: 0 0 2px #000000;
  -moz-box-shadow: 0 0 2px #000000;
  box-shadow: 0 0 2px #000000;
  height: 6px;
  display: block;
  position: absolute;
}
.leftview-box {
  position: relative;
  overflow: hidden;
}
#leftview {
  position: absolute;
}
#right::-webkit-scrollbar {
  height: 10px !important;
  display: block !important;
  background: #003f5c !important;
}

#right::-webkit-scrollbar {
  display: block !important;
}

#right::-webkit-scrollbar-thumb {
  background: #065763 !important;
  display: block !important;
}

#right::-webkit-scrollbar-track {
  display: block !important;
}
.line-bottom {
  top: 118px;
  background: #82ff81;
  -webkit-box-shadow: 0 0 2px #000000;
  -moz-box-shadow: 0 0 2px #000000;
  box-shadow: 0 0 2px #000000;
  height: 6px;
  display: block;
  position: absolute;
}

.process-item {
  width: 100%;
  height: 150px;
  .process-item-one {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .project {
    height: 100%;
    width: 194px;
    margin-right: 10px;
    padding: 12px 10px 10px 0px;

    h1 {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    ul {
      li {
        height: 30px;
        line-height: 30px;
        span {
          vertical-align: middle;
          display: inline-block;
          height: 4px;
          width: 4px;
          border-radius: 50%;
          background: #666666;
          margin-right: 10px;
        }
        .present {
          display: inline-block;
          height: 10px;
          float: right;
          width: 60px;
          .item {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: #cccccc;
            display: inline-block;
            margin-right: 3px;
          }
        }
      }
    }
  }
  .process {
    height: 100%;
    flex: 1;
    padding: 10px;
  }
}

.point,
.point-bottom {
  cursor: pointer;
}

.area {
  position: absolute;
  margin-top: 8px;
  z-index: 2000;
}

.process-item-there {
  .line {
    background: yellow;
  }
  .point {
    width: 15px;
    height: 15px;
    border-color: yellow;
    -webkit-box-shadow: 0 0 2px #000000;
    -moz-box-shadow: 0 0 2px #000000;
    box-shadow: 0 0 2px #000000;
  }
}

.success-label {
  color: #848484 !important;
}

.point:hover {
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
.point-bottom:hover {
  width: 16px;
  height: 16px;
  border-radius: 8px;
}
.tags {
  padding-right: 0px;
  position: fixed;
  right: 30px;
  .tages-item {
    width: 110px;
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .color {
      font-weight: 700;
      height: 14px;
      width: 30px;
      margin-right: 5px;
      border: 1px solid #525557;
    }
    .text {
      flex: 1;
      color: #fff;
      font-size: 14px;
    }
  }
}

.ac {
  .line-bottom {
    z-index: 100;
    .point-bottom {
      z-index: 101;
    }
  }
}
.label-item {
  // -ms-transform: rotate(-20deg);
  // transform: rotate(-20deg);
}
</style>